<template>
  <el-row type="flex" justify="center" align="middle">
    <el-col :span="12">
      <el-form label-width="60px" :rules="loginRules" :model="finance" ref="ruleForm">
        <div style=" vertical-align: middle; text-align: center;">
          <h2 style="color: #636569;margin-bottom: 10px" >融资企业注册</h2>
          <el-form-item prop="enterpriseName">
            <div style="display: inline-block;width: 80px;margin-right: 10px;font-size: 16px;text-align: left">企业名称</div>
            <el-input class="rounded-input" v-model="finance.enterpriseName" clearable placeholder="请输入企业名称" ></el-input>
          </el-form-item>
          <el-form-item prop="legal">
            <div style="display: inline-block;width: 80px;margin-right: 10px;font-size: 16px;text-align: left">法人姓名</div>
            <el-input class="rounded-input" v-model="finance.legal" clearable placeholder="请输入法人姓名" ></el-input>
          </el-form-item>
          <el-form-item prop="legalPhone">
            <div style="display: inline-block;width: 80px;margin-right: 10px;font-size: 16px;text-align: left">法人电话</div>
            <el-input class="rounded-input" v-model="finance.legalPhone" clearable placeholder="请输入法人电话" ></el-input>
          </el-form-item>
          <el-form-item prop="legalId">
            <div style="display: inline-block;width: 80px;margin-right: 10px;font-size: 16px;text-align: left">法人证件号</div>
            <el-input class="rounded-input" v-model="finance.legalId" clearable placeholder="请输入法人证件号" ></el-input>
          </el-form-item>
          <el-form-item prop="businessLicense">
            <div style="display: inline-block;width: 80px;margin-right: 10px;font-size: 16px;text-align: left">营业执照号</div>
            <el-input class="rounded-input" v-model="finance.businessLicense" clearable placeholder="请输入营业执照号" ></el-input>
          </el-form-item>
          <el-form-item prop="registeredCapital">
            <div style="display: inline-block;width: 80px;margin-right: 10px;font-size: 16px;text-align: left">注册资金</div>
            <el-input class="rounded-input" v-model="finance.registeredCapital" clearable placeholder="请输入注册资金" ></el-input>
          </el-form-item>
          <el-form-item prop="businessCapital">
            <div style="display: inline-block;width: 80px;margin-right: 10px;font-size: 16px;text-align: left">企业资金</div>
            <el-input class="rounded-input" v-model="finance.businessCapital" clearable placeholder="请输入企业资金" ></el-input>
          </el-form-item>
          <el-form-item prop="businessLicenseImage">
            <div style="display: inline-block;width: 80px;margin-right: 10px;margin-left:27px;margin-top:20px;font-size: 16px;text-align: left;float: left">营业执照</div>
            <el-upload
                style="float: left;margin-top:15px"
                class="avatar-uploader"
                :headers="headers"
                action="api/uploadimg"
                :show-file-list="false"
                :on-success="handleAvatarSuccess">
              <img v-if="finance.businessLicenseImage" :src="finance.businessLicenseImage" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-button type="warning" @click="register('ruleForm')">注册</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
        </div>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      finance:{
        enterpriseName:'',
        legal:'',
        legalPhone:'',
        legalId:'',
        businessLicenseImage:'',
        businessLicense:'',
        registeredCapital:'',
        businessCapital:'',
        coreState:'',
      },
      coreId:'',
      headers:{
        'jwt':localStorage.getItem('jwt')
      },
      loginRules: {
        enterpriseName: [
          { required: true, message: "请输入企业名称", trigger: "blur" },
          { min: 3, max: 100, message: "长度在 3 到 100 个字符", trigger: "blur" }
        ],
        legal: [
          { required: true, message: "请输入法人姓名", trigger: "blur" },
          { min: 2, max: 15, message: "长度在 2 到 15 个字符", trigger: "blur" }
        ],
        legalPhone: [
          { required: true, message: "请输入法人手机号", trigger: "blur" },
          { min: 11, max: 11, message: "长度在 11 个字符", trigger: "blur" }
        ],
        legalId: [
          { required: true, message: "请输入法人身份证号", trigger: "blur" },
          { min: 18, max: 18, message: "长度在 18 个字符", trigger: "blur" }
        ],
        businessLicense: [
          { required: true, message: "请输入营业执照号", trigger: "blur" },
          { min: 15, max: 18, message: "长度在 15 到 18 个字符", trigger: "blur" }
        ],
        registeredCapital: [
          { required: true, message: "请输入注册资金", trigger: "blur" },
          { min: 7, max: 18, message: "长度在 7 到 18 个字符", trigger: "blur" }
        ],
        businessCapital: [
          { required: true, message: "请输入企业资金", trigger: "blur" },
          { min: 7, max: 18, message: "长度在 7 到 18 个字符", trigger: "blur" }
        ],
        businessLicenseImage: [
          { required: true, message: "请上传营业执照复印件", trigger: "change" },
        ]
      }

    }
  },methods:{
    handleAvatarSuccess(res, file) {
      console.log(res);
      this.finance.businessLicenseImage = res.msg
      //写请求，把图片路径保存再数据库中

    },
    register(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.finance)
          console.log(this.finance.enterpriseName)
          let data = {};
          this.finance.coreState = 1;
          data = this.finance;
          const jwt = localStorage.getItem('jwt')
          this.$axios.post(
              'api/finance/saveFinance',
              data,
              {headers:{jwt}}).
          then(res =>{
            console.log(res.data);
            if(res.data.code == 200) {
              this.$message({
                message: '恭喜你，注册成功',
                type: 'success'
              });
              this.coreRecommendationRecord()
            }
          })
        }
        else {
          console.log('error submit!!');
          return false;
        }
      });

    },
    reset(){
      this.finance= {}
    },
    request(){
      let account = localStorage.getItem('userName');
      this.$axios.get('api/user/selectUserByAccount?account='+account,
          {headers:{'jwt':localStorage.getItem('jwt')}})
          .then(res =>{
          console.log(res.data)
           this.coreId = res.data.data.userCoreId;
      })
    },
    coreRecommendationRecord(){
      console.log(this.finance.enterpriseName)
      this.$axios.get(
          'api/CoreRecommendationRecord/insertCoreRecommendationRecord?enterpriseName=' + this.finance.enterpriseName + '&coreId=' + this.coreId,
          { headers: { 'jwt': localStorage.getItem('jwt') } }
      )
        .then(res => {
          console.log(res.data)
          this.finance= {}
        })
    }
  },
  created(){
  this.request()
  }
}
</script>
<style scoped>
.el-row {
  background-image: url("../../../assets/core/Recommend.jpg");
  background-size: 100% 100%;
  height: 100%;

}
.el-col {
  background-color: rgba(232, 241, 232, 0.46);
  padding-top: 35px;
  border-radius: 30px;
  width: 550px;
  height: 600px;
}
.rounded-input{
  width: 280px;
  margin-top: 12px;
  margin-right: 65px;
}
.rounded-input >>> .el-input__inner {
  border-radius: 15px; /* 调整圆角大小，根据需要进行修改 */
}
.el-form-item{
  padding: 0;
  margin: 0;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.avatar {
  width: 50px;
  height: 50px;
  display: block;
}
.el-button{
  margin-left: 80px;
  width: 130px;

}
</style>